<template>
  <div>
    <video-bar :title="categoryName" class="video-box" />
    <little-type :lists="countryList" @choose-types="chooseCountry" />
    <little-type :lists="typesList" @choose-types="chooseTypes" />
    <little-type :lists="yearsList" @choose-types="chooseYears" />
    <video-list class="video-list" :lists="videoList" />
    <van-pagination v-model="queryForm.pageNum" :page-count="pageCount" mode="simple"  @change="pageChange" />
  </div>
</template>

<script>
import categoryApi from "@/api/home/category";
import littleTypeApi from "@/api/more/littleType";
import VideoBar from "@/components/videobar/index";
import LittleType from "@/components/littleType/index";
import VideoList from "@/components/videoList/index";
export default {
  name: "more",
  components: {
    VideoBar,
    LittleType,
    VideoList,
  },
  data() {
    return {
      queryForm: {
        pageNum: 1,
        pageSize: 8,
        categoryId: 0,
        country: "",
        date: "",
        type: "",
      },
      total:0,
      pageCount:0,
      categoryId: 0,
      categoryName: "",
      countryList: [],
      typesList: [],
      yearsList: [],
      videoList: [],
    };
  },
  created() {
    this.categoryId = this.$route.query.categoryId;
    if (this.categoryId) {
      this.getCategoryInfo();
      this.queryForm.categoryId = this.categoryId
      this.getVideoList()
    }
    this.getCountryList();
    this.getTypesList();
    this.getYearsList();
  },
  methods: {
    pageChange(data) {
      this.queryForm.pageNum = data;
      this.getVideoList()
    },
    chooseCountry(data) {
      this.queryForm.pageNum = 1
      if(data == '全部'){
        this.queryForm.country = ''
      }else{
        this.queryForm.country = data
      }
      this.getVideoList()
    },
    chooseTypes(data) {
      this.queryForm.pageNum = 1
      if(data == '全部'){
        this.queryForm.type = ''
      }else{
        this.queryForm.type = data
      }
      this.getVideoList()
    },
    chooseYears(data) {
      this.queryForm.pageNum = 1
      if(data == '全部'){
        this.queryForm.date = ''
      }else{
        this.queryForm.date = data
      }
      this.getVideoList()
    },
    async getVideoList() {
      let res = await littleTypeApi.queryVideo(this.queryForm);
      console.log(res);
      if (res.code === 20000) {
        this.videoList = res.data.records;
        this.total = res.data.total;
        this.pageCount = Math.ceil(this.total / this.queryForm.pageSize)
      } else {
        this.$toast(res.msg);
      }
    },
    async getCategoryInfo() {
      let res = await categoryApi.getInfo(this.categoryId);
      if (res.code === 20000) {
        this.categoryName = res.data.data.name;

      } else {
        this.$toast(res.msg);
      }
    },
    async getCountryList() {
      let res = await littleTypeApi.getCountry();
      if (res.code === 20000) {
        this.countryList = res.data.data;
      } else {
        this.$toast(res.msg);
      }
    },
    async getTypesList() {
      let res = await littleTypeApi.getTypes();
      if (res.code === 20000) {
        this.typesList = res.data.data;
      } else {
        this.$toast(res.msg);
      }
    },
    async getYearsList() {
      let res = await littleTypeApi.getYears();
      if (res.code === 20000) {
        this.yearsList = res.data.data;
      } else {
        this.$toast(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.video-list{
  margin-top: 10px;
}
.video-box{
  margin-bottom: 20px;
}
.van-pagination{
  padding: 10px 15px 0;
}
</style>